<template>
    <div class="w750 white-bg">
        <header>
            <div class="header-box">
                <div class="header-back" @click="goback">
                    <span class="back-img"><img src="../../assets/images/back.png" alt="" /></span>
                </div>
                <div class="header-search"><p class="ser-txt">登录中心</p></div>
                <div class="header-mes"></div>
            </div>
        </header>

        <div class="captcha">
            <div class="login" :class="themes.theme">
                <div class="container">
                    <h3>{{ !loginMode ? '验证码登录' : '帐号密码登录' }}</h3>
                    <p class="safe-tips">为了你的帐号安全，请用手机号登录</p>
                    <!-- 验证码 -->
                    <div class="login-box">
                        <div class="country">中国 +86</div>
                        <div class="phone cell">
                            <div class="field__body">
                                <input type="text" maxlength="11" placeholder="请输入手机号码" v-model="phone" />
                            </div>
                        </div>
                    </div>
                    <div class="login-box" v-show="!loginMode">
                        <div class="phone cell">
                            <div class="field__body">
                                <input type="text" maxlength="6" placeholder="请输入6位验证码" v-model="code" />
                            </div>
                            <!-- <span class="login-btn" :class="{'countdown' : countDown != 0}" @click.prevent="getVerifyCode()">{{ countDown == 0 ? '发送验证码' : '重新发送' + countDown + '秒' }}</span> -->
                            <getvali-date codeType="smsLogin" :codeMobile="phone" :class="'login-btn'" />
                        </div>
                    </div>
                    <div class="login-box" v-show="loginMode">
                        <div class="phone cell">
                            <div class="field__body">
                                <input type="password" placeholder="请输入密码" v-model="password" />
                            </div>
                        </div>
                    </div>
                    <!-- 验证码 -->
                    <div class="b-btn" style="margin-top: 20px; padding: 5px 0px" @click.prevent="login">
                        <span class="btn-r" style="background: #007fff !important">登录</span>
                    </div>
                    <!-- <div  class="b-btn" id="captcha"  v-show="loginMode" style="margin-top:30px;margin-bottom:15px;padding: 0;"></div> -->
                    <p class="checke-type clearfix">
                        <span class="pass-btn" @click="dealLoginMode(loginMode)">{{ !loginMode ? '密码登录' : '验证码登录' }}</span>
                    </p>
                </div>
            </div>
        </div>

        <!-- /账号密码登录 -->
    </div>
</template>

<script>
import getvaliDate from 'components/getvaliDate/getvaliDate'
import { passport, tokenManage } from 'utils/Cache'
import formCheck from 'utils/formCheck'
import { mapState } from 'vuex'
import oauthService from 'service/oauth'
import { serviceLogin, serviceSmsLogin } from 'api/facilitator'

export default {
    components: {
        getvaliDate
    },
    data() {
        return {
            loginMode: false, // 登陆方式, true密码登陆, false 验证码登录
            userName: '', // 手机号码，或者用户名，邮箱
            password: '', //密码
            phone: '', // 手机号码
            code: '', //验证码
            countDown: 0 // 倒计时
        }
    },
    mounted() {},
    methods: {
        //返回
        goback() {
            this.$router.replace('/index')
        },

        // 登陆模式切换
        dealLoginMode(flag) {
            this.loginMode = !flag
            this.countDown = 0
            clearInterval(this.intervalId)
        },

        //登录
        async login() {
            if (this.loginMode) {
                //如果是账号密码登录
                let errorMsg =
                    formCheck.isNonEmpty(this.phone, '请输入手机号') ||
                    formCheck.phoneRight(this.phone, '请输入正确的手机号码') ||
                    formCheck.isNonEmpty(this.password, '请输入正确密码') ||
                    formCheck.isEqual(this.newPwd, this.surePwd, '两次密码不一致')

                if (errorMsg) {
                    this.$toast(errorMsg)
                    return
                }

                //账号密码登录
                this.$toast.loading({
                    message: '登录中...',
                    forbidClick: true
                })

                // 服务商登录
                serviceLogin({
                    loginName: this.phone,
                    password: this.password,
                    platform: 'H5'
                }).then((res) => {
                    if (!res.success) {
                        this.$toast({
                            message: res.msg,
                            forbidClick: true
                        })
                        return
                    }

                    tokenManage.setToken(res.result)
					this.$store.dispatch('setDistribution') //设置分销员
                    this.$toast({
                        message: '登录成功',
                        forbidClick: true
                    })
                    this.$router.replace({ name: 'facilitatorIndex' })
                })
            } else {
                //如果是快捷登录

                let errorMsg =
                    formCheck.isNonEmpty(this.phone, '请输入手机号') ||
                    formCheck.phoneRight(this.phone, '请输入正确的手机号码') ||
                    formCheck.isNonEmpty(this.code, '请输入验证码') ||
                    formCheck.checkeCode(this.code, '请检查验证码是否是纯数字~')

                if (errorMsg) {
                    this.$toast(errorMsg)
                    return
                }
                //账号密码登录
                this.$toast.loading({
                    message: '登录中...',
                    forbidClick: true
                })

                // 服务商登录
                serviceSmsLogin({
                    phone: this.phone,
                    code: this.code,
                    platform: 'H5',
                    verId: '1.0'
                }).then((res) => {
                    if (!res.success) {
                        this.$toast({
                            message: res.msg,
                            forbidClick: true
                        })
                        return
                    }

                    tokenManage.setToken(res.result)
                    this.$toast({
                        message: '登录成功',
                        forbidClick: true
                    })
                    this.$router.replace({ name: 'facilitatorIndex' })
                })
            }
        }
    },
    computed: {
        ...mapState(['themes'])
    }
}
</script>

<style src="../../assets/css/style/login-style.css" scoped></style>
<style src="../../assets/css/style/b-btn.css" scoped></style>
<style src="../../assets/css/login.css" scoped></style>
<style scoped>
.captcha {
    padding: 0 15px;
    /* position: absolute; */
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
}
.captcha .login {
    flex: 1;
    min-height: 420px;
}
.captcha .container {
    flex: 1;
    min-height: 420px;
}
.captcha h3 {
    margin: 20px 0 14px;
    font-size: 24px;
    font-weight: 500;
    color: #333;
    line-height: 24px;
}
.captcha .safe-tips {
    font-size: 14px;
    color: #999;
    margin-top: 20px;
    line-height: 14px;
}
.captcha .login-box {
    padding: 21px 0 10px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    font-size: 14px;
}
.captcha .login-box .country {
    padding-right: 10px;
    margin-right: 10px;
    color: #333;
    position: relative;
}
.captcha .login-box .country::after {
    display: block;
    content: ' ';
    width: 1px;
    height: 14px;
    background: #e5e5e5;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    right: 0;
}
.captcha .cell {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    padding: 10px 15px;
}
.captcha .phone {
    flex: 1;
    background: none;
    padding: 0;
}
.captcha .cell .field__body input {
    font-size: 14px;
    line-height: 1em;
    padding: 4px 0;
    height: 24px;
    border: 0;
    margin: 0;
    display: block;
    color: #323233;
    box-sizing: border-box;
    background-color: transparent;
}
.captcha .cell .login-btn {
    display: inline-block;
    color: #38f;
    font-size: 14px;
    margin-left: auto;
}
.field__body {
    display: flex;
    align-items: center;
}
.checke-type {
    font-size: 12px;
    color: #38f;
    line-height: 12px;
}
.checke-type .pass-btn {
    display: inline-block;
}
.checke-type .register-btn,
.checke-type .forget-pass-btn {
    display: inline-block;
    text-align: right;
    float: right;
    vertical-align: bottom;
}

.checke-type .forget-pass-btn:after {
    content: '|';
    width: 1px;
    height: 100%;
    color: #e5e5e5;
    display: inline-block;
    margin: 0 10px;
    vertical-align: bottom;
}
.countdown {
    font-size: 12px;
    color: #ccc;
}
.footer {
    font-size: 12px;
    color: #bbb;
    line-height: 14px;
    text-align: center;
    margin: 25px 0;
}

.captcha .container {
    /* flex: 1; */
    /* min-height: 500px; */
}
</style>

<style>
._nc .stage1 .slider {
    height: 42px !important;
    box-shadow: none;
    border: 1px solid #4eae31;
    background-color: #fff;
}
._nc .stage1 .button {
    left: -1px;
    top: -1px;
    background-color: #5fc221;
}
._nc .stage1 .track div,
._nc .stage1 .label,
._nc .stage1 .button,
._nc .stage1 {
    line-height: 42px;
    height: 42px;
}
._nc .stage1 .track div {
    color: #fff !important;
}
._nc .stage1 .bg-green {
    background: rgba(7, 193, 96, 0.2) !important;
}
</style>
